<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>VuePress + GitHub搭建个人博客笔记（1） | 个人技术的分享</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/logo.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/logo.png">
    <link rel="stylesheet" href="/styles/iconfont.css">
    <meta name="description" content="切图仔、CV/API工程师。">
    <link rel="preload" href="/assets/css/0.styles.bab1657c.css" as="style"><link rel="preload" href="/assets/js/app.dfe2ff49.js" as="script"><link rel="preload" href="/assets/js/3.bd810dc8.js" as="script"><link rel="preload" href="/assets/js/4.7eb6bf85.js" as="script"><link rel="preload" href="/assets/js/94.03f26b32.js" as="script"><link rel="prefetch" href="/assets/js/10.9314e6e2.js"><link rel="prefetch" href="/assets/js/100.aff7ce2a.js"><link rel="prefetch" href="/assets/js/101.6d8bb072.js"><link rel="prefetch" href="/assets/js/102.ab4c6afe.js"><link rel="prefetch" href="/assets/js/103.f613c5b8.js"><link rel="prefetch" href="/assets/js/104.3cd8f787.js"><link rel="prefetch" href="/assets/js/105.ddd67c67.js"><link rel="prefetch" href="/assets/js/106.bf26ab7e.js"><link rel="prefetch" href="/assets/js/107.2a6632ce.js"><link rel="prefetch" href="/assets/js/108.5885d4d6.js"><link rel="prefetch" href="/assets/js/109.22628ed2.js"><link rel="prefetch" href="/assets/js/11.67c23384.js"><link rel="prefetch" href="/assets/js/110.8dcf645b.js"><link rel="prefetch" href="/assets/js/111.a75b4e6d.js"><link rel="prefetch" href="/assets/js/112.762ffa1c.js"><link rel="prefetch" href="/assets/js/113.c5b41064.js"><link rel="prefetch" href="/assets/js/114.34ec817a.js"><link rel="prefetch" href="/assets/js/115.5f0aa55b.js"><link rel="prefetch" href="/assets/js/116.698defdd.js"><link rel="prefetch" href="/assets/js/117.bb7bcca3.js"><link rel="prefetch" href="/assets/js/118.2d66657c.js"><link rel="prefetch" href="/assets/js/119.8a262cdd.js"><link rel="prefetch" href="/assets/js/12.bb124c65.js"><link rel="prefetch" href="/assets/js/120.3c491dee.js"><link rel="prefetch" href="/assets/js/121.3505af80.js"><link rel="prefetch" href="/assets/js/122.04e9a7cf.js"><link rel="prefetch" href="/assets/js/123.4e17d778.js"><link rel="prefetch" href="/assets/js/124.13b04833.js"><link rel="prefetch" href="/assets/js/125.bd0012a2.js"><link rel="prefetch" href="/assets/js/126.99cc4ec3.js"><link rel="prefetch" href="/assets/js/127.b5a83745.js"><link rel="prefetch" href="/assets/js/128.56b40a89.js"><link rel="prefetch" href="/assets/js/129.1489ad27.js"><link rel="prefetch" href="/assets/js/13.1e4b99c7.js"><link rel="prefetch" href="/assets/js/130.c64a96a8.js"><link rel="prefetch" href="/assets/js/131.7dbeedc5.js"><link rel="prefetch" href="/assets/js/132.c11a3a90.js"><link rel="prefetch" href="/assets/js/133.c02b1035.js"><link rel="prefetch" href="/assets/js/134.27e97bf6.js"><link rel="prefetch" href="/assets/js/135.5cf1ffcb.js"><link rel="prefetch" href="/assets/js/136.732866b5.js"><link rel="prefetch" href="/assets/js/137.71150c2b.js"><link rel="prefetch" href="/assets/js/138.6edc5f97.js"><link rel="prefetch" href="/assets/js/139.7dc5785a.js"><link rel="prefetch" href="/assets/js/14.230d6df1.js"><link rel="prefetch" href="/assets/js/140.df409b41.js"><link rel="prefetch" href="/assets/js/141.23e4a662.js"><link rel="prefetch" href="/assets/js/15.fbe6b5b2.js"><link rel="prefetch" href="/assets/js/16.72f3903d.js"><link rel="prefetch" href="/assets/js/17.667ac210.js"><link rel="prefetch" href="/assets/js/18.9b60328e.js"><link rel="prefetch" href="/assets/js/19.d1bb7ffd.js"><link rel="prefetch" href="/assets/js/20.4bf72a89.js"><link rel="prefetch" href="/assets/js/21.d62b0bbb.js"><link rel="prefetch" href="/assets/js/22.c15b497e.js"><link rel="prefetch" href="/assets/js/23.583da9a1.js"><link rel="prefetch" href="/assets/js/24.59df73ca.js"><link rel="prefetch" href="/assets/js/25.ae681969.js"><link rel="prefetch" href="/assets/js/26.4652101c.js"><link rel="prefetch" href="/assets/js/27.4f2c4857.js"><link rel="prefetch" href="/assets/js/28.cd131e05.js"><link rel="prefetch" href="/assets/js/29.3d4a8ee1.js"><link rel="prefetch" href="/assets/js/30.bc6d42d1.js"><link rel="prefetch" href="/assets/js/31.2c405117.js"><link rel="prefetch" href="/assets/js/32.0ceecc6e.js"><link rel="prefetch" href="/assets/js/33.12a93636.js"><link rel="prefetch" href="/assets/js/34.f4994641.js"><link rel="prefetch" href="/assets/js/35.926aff5c.js"><link rel="prefetch" href="/assets/js/36.1850fac0.js"><link rel="prefetch" href="/assets/js/37.7990b07f.js"><link rel="prefetch" href="/assets/js/38.0c59d91b.js"><link rel="prefetch" href="/assets/js/39.f5ad73cc.js"><link rel="prefetch" href="/assets/js/40.9853630f.js"><link rel="prefetch" href="/assets/js/41.ee8f051d.js"><link rel="prefetch" href="/assets/js/42.03d761cf.js"><link rel="prefetch" href="/assets/js/43.6f6c7421.js"><link rel="prefetch" href="/assets/js/44.47e28062.js"><link rel="prefetch" href="/assets/js/45.af48f901.js"><link rel="prefetch" href="/assets/js/46.c2ef1108.js"><link rel="prefetch" href="/assets/js/47.3b754edd.js"><link rel="prefetch" href="/assets/js/48.41fd0e4b.js"><link rel="prefetch" href="/assets/js/49.fa8bb2d6.js"><link rel="prefetch" href="/assets/js/5.9554ffdf.js"><link rel="prefetch" href="/assets/js/50.470960b6.js"><link rel="prefetch" href="/assets/js/51.f641e205.js"><link rel="prefetch" href="/assets/js/52.292aa625.js"><link rel="prefetch" href="/assets/js/53.06feb6d0.js"><link rel="prefetch" href="/assets/js/54.bd22026a.js"><link rel="prefetch" href="/assets/js/55.ea51cd92.js"><link rel="prefetch" href="/assets/js/56.f909fe9f.js"><link rel="prefetch" href="/assets/js/57.02f3b546.js"><link rel="prefetch" href="/assets/js/58.70a7433b.js"><link rel="prefetch" href="/assets/js/59.c0fc6ad7.js"><link rel="prefetch" href="/assets/js/6.32562f11.js"><link rel="prefetch" href="/assets/js/60.6e2b4c40.js"><link rel="prefetch" href="/assets/js/61.a52a09ff.js"><link rel="prefetch" href="/assets/js/62.27ccbcf9.js"><link rel="prefetch" href="/assets/js/63.8a96fdd6.js"><link rel="prefetch" href="/assets/js/64.4c572d6a.js"><link rel="prefetch" href="/assets/js/65.b1d5b340.js"><link rel="prefetch" href="/assets/js/66.7107370e.js"><link rel="prefetch" href="/assets/js/67.666b4292.js"><link rel="prefetch" href="/assets/js/68.8c3bd9eb.js"><link rel="prefetch" href="/assets/js/69.4c5cd008.js"><link rel="prefetch" href="/assets/js/7.84c0fac9.js"><link rel="prefetch" href="/assets/js/70.c219a726.js"><link rel="prefetch" href="/assets/js/71.a952c191.js"><link rel="prefetch" href="/assets/js/72.b1635d94.js"><link rel="prefetch" href="/assets/js/73.c828f2de.js"><link rel="prefetch" href="/assets/js/74.29555c6a.js"><link rel="prefetch" href="/assets/js/75.ddd32435.js"><link rel="prefetch" href="/assets/js/76.33b11087.js"><link rel="prefetch" href="/assets/js/77.1992b55d.js"><link rel="prefetch" href="/assets/js/78.6e4af851.js"><link rel="prefetch" href="/assets/js/79.0c6e5357.js"><link rel="prefetch" href="/assets/js/8.b775bc4d.js"><link rel="prefetch" href="/assets/js/80.a2494e79.js"><link rel="prefetch" href="/assets/js/81.ba3634f7.js"><link rel="prefetch" href="/assets/js/82.bf7c34dc.js"><link rel="prefetch" href="/assets/js/83.a424781a.js"><link rel="prefetch" href="/assets/js/84.1024c1e9.js"><link rel="prefetch" href="/assets/js/85.75a55948.js"><link rel="prefetch" href="/assets/js/86.f957a19e.js"><link rel="prefetch" href="/assets/js/87.0d718ad6.js"><link rel="prefetch" href="/assets/js/88.f17614e7.js"><link rel="prefetch" href="/assets/js/89.354fe35d.js"><link rel="prefetch" href="/assets/js/9.8eda8208.js"><link rel="prefetch" href="/assets/js/90.6dd96ee4.js"><link rel="prefetch" href="/assets/js/91.136af10e.js"><link rel="prefetch" href="/assets/js/92.a9c072ce.js"><link rel="prefetch" href="/assets/js/93.c52cc17a.js"><link rel="prefetch" href="/assets/js/95.2d937101.js"><link rel="prefetch" href="/assets/js/96.b93eee83.js"><link rel="prefetch" href="/assets/js/97.075388e9.js"><link rel="prefetch" href="/assets/js/98.297b61d9.js"><link rel="prefetch" href="/assets/js/99.df97102a.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2e6ea98f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.bab1657c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="图标: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.png" alt="个人技术的分享" class="logo"> <span class="site-name">个人技术的分享</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          博文
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/blog/leetcode/">
          LeetCode
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/thoughts/">
          随想
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/blog/other/" aria-current="page" title="快速导航" class="sidebar-link">快速导航</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>系统环境相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>开发工具相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>部署相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>博客相关</span> <span class="arrow down"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/other/aboutblog/window-is-not-defined.html" title="ReferenceError: window is not defined" class="sidebar-link">ReferenceError: window is not defined</a></li><li><a href="/blog/other/aboutblog/vuepress-loading-mask.html" title="VuePress添加loading页" class="sidebar-link">VuePress添加loading页</a></li><li><a href="/blog/other/aboutblog/vuepress-theme-antdocs.html" title="使用和改造vuepress-theme-antdocs主题" class="sidebar-link">使用和改造vuepress-theme-antdocs主题</a></li><li><a href="/blog/other/aboutblog/modify-vuepress-theme.html" title="VuePress之修改默认主题" class="sidebar-link">VuePress之修改默认主题</a></li><li><a href="/blog/other/aboutblog/vuepress-diy-plugin.html" title="VuePress之开发自己的插件" class="sidebar-link">VuePress之开发自己的插件</a></li><li><a href="/blog/other/aboutblog/vuepress-plugin.html" title="VuePress + GitHub搭建个人博客笔记（2）必备插件" class="sidebar-link">VuePress + GitHub搭建个人博客笔记（2）必备插件</a></li><li><a href="/blog/other/aboutblog/vuepress-build-blog.html" aria-current="page" title="VuePress + GitHub搭建个人博客笔记（1）" class="active sidebar-link">VuePress + GitHub搭建个人博客笔记（1）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/other/aboutblog/vuepress-build-blog.html#一、开始" title="一、开始" class="sidebar-link">一、开始</a></li><li class="sidebar-sub-header"><a href="/blog/other/aboutblog/vuepress-build-blog.html#二、部署" title="二、部署" class="sidebar-link">二、部署</a></li><li class="sidebar-sub-header"><a href="/blog/other/aboutblog/vuepress-build-blog.html#三、常见问题" title="三、常见问题" class="sidebar-link">三、常见问题</a></li></ul></li></ul></section></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="vuepress-github搭建个人博客笔记-1"><a href="#vuepress-github搭建个人博客笔记-1" class="header-anchor">#</a> VuePress + GitHub搭建个人博客笔记（1）</h1> <!----> <blockquote><p>准备搭博客了。之前了解了一下<code>VuePress</code>，它<strong>极简</strong>而且又<strong>支持MD语法</strong>，而且还可以使用<code>Vue</code>自己<strong>开发个性化插件</strong>，还有一个重要的理由是有自己的网站感觉很酷👀！</p></blockquote> <h2 id="一、开始"><a href="#一、开始" class="header-anchor">#</a> 一、开始</h2> <p>相关的教程网络上已经一搜一大堆了，我的<a href="https://www.cnblogs.com/softidea/p/10084946.html" target="_blank" rel="noopener noreferrer">参考教程<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>， 很多<strong>重复的劳动都简要写一下好了</strong>。</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># 全局安装</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> vuepress
<span class="token comment"># 建立my-blog文件夹</span>
<span class="token function">mkdir</span> my-blog
<span class="token comment"># 进入my-blog文件夹</span>
<span class="token builtin class-name">cd</span> my-blog
<span class="token comment"># 初始化项目 该命令会自动生成package.json等文件</span>
<span class="token function">npm</span> init <span class="token parameter variable">-y</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>在<code>my-blog</code>下创建文件结构如下所示：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>.根目录
├── docs
│   ├── .vuepress
│   │   ├── public 存放图片等静态资源
│   │   ├── styles
│   │   │   └── palette.styl 主题样式-&gt;全局
│   │   └── config.js 配置
│   ├── README.md 首页
│   └── blog
│       └── README.md
└── package.json
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="custom-block danger"><p class="custom-block-title">WARNING</p> <p>⚠️注意：<code>README.md</code>是必须的，访问<code>/blog/</code>时将自动指向<code>blog</code>文件夹下面的<code>README.md</code>，没有该文件会引发编译错误。</p></div> <h3 id="_1-config-js"><a href="#_1-config-js" class="header-anchor">#</a> 1.<code>config.js</code></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'游客17846'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'Just do it!'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">head</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token comment">// 会加入&lt;head&gt;中</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">rel</span><span class="token operator">:</span> <span class="token string">'icon'</span><span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">'/logo.ico'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">// 指定浏览器Tab图标</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">rel</span><span class="token operator">:</span> <span class="token string">'manifest'</span><span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">'/manifest.json'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//PWA</span>
    <span class="token punctuation">[</span><span class="token string">'link'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">rel</span><span class="token operator">:</span> <span class="token string">'apple-touch-icon'</span><span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">'/logo.png'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token comment">// 指定safari浏览器保存书签至桌面图标</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">serviceWorker</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span><span class="token comment">// 部署时指定存放的项目的地址</span>
  <span class="token literal-property property">markdown</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">lineNumbers</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token comment">// 代码块行号显示</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">themeConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">logo</span><span class="token operator">:</span> <span class="token string">'/logo.png'</span><span class="token punctuation">,</span><span class="token comment">// 主页显示图标</span>
    <span class="token literal-property property">nav</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 首页地址不想指定的话就不用改，默认指向docs下面的README.md</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'博文'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'/blog/'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// 默认指向blog下的README.md</span>
      <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'GitHub'</span><span class="token punctuation">,</span> <span class="token literal-property property">link</span><span class="token operator">:</span> <span class="token string">'https://github.com/UAERNAME'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lastUpdated</span><span class="token operator">:</span> <span class="token string">'上次更新时间'</span><span class="token comment">// 页面最下方的最后更新时间戳</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>参考资料：</p> <ul><li><p><a href="https://www.vuepress.cn/guide/basic-config.html#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" target="_blank" rel="noopener noreferrer">VuePress基本配置官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/Manifest" target="_blank" rel="noopener noreferrer">PWA<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li></ul> <h3 id="_2-palette-styl"><a href="#_2-palette-styl" class="header-anchor">#</a> 2.<code>palette.styl</code></h3> <div class="language-stylus line-numbers-mode"><pre class="language-stylus"><code><span class="token variable-declaration"><span class="token variable">$accentColor</span> <span class="token operator">=</span> <span class="token hexcode">#87cefa</span> <span class="token comment">// 主题色</span></span>
<span class="token variable-declaration"><span class="token variable">$textColor</span> <span class="token operator">=</span> <span class="token hexcode">#000</span> <span class="token comment">// 文字颜色</span></span>
<span class="token variable-declaration"><span class="token variable">$borderColor</span> <span class="token operator">=</span> <span class="token hexcode">#eaecef</span> <span class="token comment">// 边框颜色</span></span>
<span class="token variable-declaration"><span class="token variable">$codeBgColor</span> <span class="token operator">=</span> <span class="token hexcode">#282c34</span> <span class="token comment">// 代码背景颜色</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>这是全局样式文件，可以<strong>自己设置主题色</strong>等，另外在写自己的插件或页面时，<strong>这些样式可以继承使用</strong>。</p> <h3 id="_3-package-json"><a href="#_3-package-json" class="header-anchor">#</a> 3.<code>package.json</code></h3> <p>在<code>package.json</code>的<code>&quot;scripts&quot;</code>里面添加如下代码：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span><span class="token comment">// 开发环境运行</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span><span class="token comment">// 打包生成部署环境的文件</span>
  <span class="token punctuation">}</span>
  ...
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>也可以不添加，直接用<code>vuepress dev docs</code>和<code>vuepress build docs</code>，<strong>macOS</strong>下请在命令前加<code>sudo</code>。</p> <p><strong>接下来就可以跑一下试试了</strong> =&gt; <code>npm run dev</code>。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>这部分有会遇到一些比较常见的<strong>错误/问题</strong>，参见<a href="#%E4%B8%89%E3%80%81%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">第三部分</a></p></div> <h2 id="二、部署"><a href="#二、部署" class="header-anchor">#</a> 二、部署</h2> <p>部署这里需要使用GitHub来托管代码，使用<code>GitHub Pages</code>搭建静态站点，有的用就行了，要啥自行车。</p> <h3 id="_1-新建一个部署用仓库"><a href="#_1-新建一个部署用仓库" class="header-anchor">#</a> 1.新建一个部署用仓库</h3> <p>在GitHub中新建一个仓库，该仓库将被用来存放打包生成好的用来部署的文件（就是<code>npm run build</code>/<code>vuepress build docs</code>命令生成的存放在<code>docs/.vuepress</code>里面的<code>dist</code>文件夹）。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>⚠️注意：<strong>该仓库</strong>必须具有以下特征：</p> <ul><li><p>1.仓库名必须为<code>USERNAME.github.io</code>，注意这是<strong>用户名而不是昵称</strong>。该仓库不用克隆至本地。</p> <p>用户名可以从GitHub地址中看出来 -&gt; <strong>红圈内容</strong>，可不分大小写。</p> <p><img src="/images/other/aboutblog/vuepress-blog-01.png" alt="vuepress"></p></li> <li><p>2.需在设置中将<code>GitHub Pages</code>开启。</p> <p>步骤：进入仓库-&gt;点击选项卡中的<code>Setting</code>-&gt;<code>GitHub Pages</code>中选择<code>master branch</code>。</p> <p><img src="/images/other/aboutblog/vuepress-blog-02.png" alt="vuepress"></p> <p><img src="/images/other/aboutblog/vuepress-blog-03.png" alt="vuepress"></p></li></ul></div> <h3 id="_2-另外新建一个源代码仓库"><a href="#_2-另外新建一个源代码仓库" class="header-anchor">#</a> 2.另外新建一个源代码仓库</h3> <p>上面的仓库用来<strong>存放部署项目编译后生成的文件</strong>，本仓库用来<strong>存放博客项目的源代码</strong>，就是<code>my-blog</code>文件夹。</p> <h3 id="_3-部署自动化deploy-sh"><a href="#_3-部署自动化deploy-sh" class="header-anchor">#</a> 3.部署自动化<code>deploy.sh</code></h3> <p>在项目根目录创建<code>deploy.sh</code>，写入以下内容：</p> <div class="language-shell line-numbers-mode"><pre class="language-shell"><code><span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> <span class="token parameter variable">-e</span>

<span class="token comment"># 编译生成静态文件</span>
<span class="token function">npm</span> run build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> <span class="token parameter variable">-A</span>
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">'deploy'</span>

<span class="token comment"># 发布到上面建立的第一个仓库</span>
<span class="token function">git</span> push <span class="token parameter variable">-f</span> git@github.com:USERNAME/USERNAME.github.io.git master

<span class="token comment"># 返回上一次工作目录</span>
<span class="token builtin class-name">cd</span> -
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>在<code>package.json</code>的<code>scripts</code>中添加命令：</p> <div class="language-json line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span><span class="token comment">// 开发环境运行</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span><span class="token punctuation">,</span><span class="token comment">// 打包生成部署环境的文件</span>
    <span class="token comment">// 自动执行deploy.sh脚本，执行自动编译并将dist上传至USERNAME.github.io仓库</span>
    <span class="token property">&quot;deploy&quot;</span><span class="token operator">:</span> <span class="token string">&quot;sudo bash deploy.sh&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
  ...
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>这里前面加了一个<code>sudo</code>是因为macOS中执行需要管理员权限，windows下就不用加了，另外windows下执行的话需要在<strong>powershell</strong>中执行，<strong>cmd是不认得这个<code>bash</code>的</strong>。</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>差不多一个博客项目就搭建完了，另外还搭建了自动化部署的一整套流程。</p> <ul><li>写完博客后，在本地运行<code>npm run dev</code>，当然也可以边写边运行，保存后通过热更新可以直接看到效果。</li> <li>检查无误后执行<code>npm run deploy</code>，就可以执行<code>deploy.sh</code>脚本<strong>执行编译和自动部署</strong>。</li> <li>另外<code>Typora</code>这个<code>Markdowm</code>编写神器是非常好用👍。</li></ul></div> <h2 id="三、常见问题"><a href="#三、常见问题" class="header-anchor">#</a> 三、常见问题</h2> <h3 id="_1-白屏并且模块加载失败"><a href="#_1-白屏并且模块加载失败" class="header-anchor">#</a> 1.白屏并且模块加载失败</h3> <p><img src="/images/other/aboutblog/vuepress-blog-04.png" alt="vuepress"></p> <p>一般是刚建的<code>md</code>的文件里面没有写入任何字符，导致错误。</p> <h3 id="_2-白屏并且热更新失败"><a href="#_2-白屏并且热更新失败" class="header-anchor">#</a> 2.白屏并且热更新失败</h3> <p><img src="/images/other/aboutblog/vuepress-blog-05.png" alt="vuepress"></p> <p>不知道为啥，我这里很常见，写着写着就这样，需要<code>control + c</code>退出，并且重新<code>npm run dev</code>。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2 years ago</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/blog/other/aboutblog/vuepress-plugin.html" class="prev"><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        VuePress + GitHub搭建个人博客笔记（2）必备插件
      </a></span> <!----></p></div> </main> <!----></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:10px;bottom:60px;width:135px;height:300px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="135" height="300" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:135px;height:300px;"></canvas></div></div></div>
    <script src="/assets/js/app.dfe2ff49.js" defer></script><script src="/assets/js/3.bd810dc8.js" defer></script><script src="/assets/js/4.7eb6bf85.js" defer></script><script src="/assets/js/94.03f26b32.js" defer></script>
  </body>
</html>